import React from 'react'
import Logo from '../../component/logo/logo'
import { List, InputItem, WhiteSpace, WingBlank, Button, Radio } from 'antd-mobile'
import { connect } from 'react-redux'
import { register } from '../../redux/user.redux'
import highFrom from '../../component/imooc-form/imooc-form'

const RadioItem = Radio.RadioItem

@connect(
  state => state.user,
  { register }
)
@highFrom
class Register extends React.Component {
  // constructor () {
  //   super()
  //   this.state = {
  //     user: '',
  //     pwd: '',
  //     repeatpwd: '',
  //     type: 'genius' // boss
  //   }
  // }
  register () {
    this.props.register(this.props.state)
  }
  login () {
    this.props.history.push('/login')
  }
  // handleChange (key, value) {
  //   this.setState({
  //     [key]: value
  //   })
  // }
  // 设置默认的用户身份
  componentDidMount(){
		this.props.handleChange('type','genius')
	}
  componentDidUpdate (prevProps) {
    if (this.props.redirectTo) {
      this.props.history.push(this.props.redirectTo)
    }
  }
  render () {
    // console.log(this.props)
    return (
      <div>
        <Logo />
        <WingBlank>
          {this.props.msg ? <p className='error-msg'>{this.props.msg}</p> : null}
          <List>
            <InputItem onChange={v => this.props.handleChange('user', v)} placeholder='username'>用户名</InputItem>
            <InputItem onChange={v => this.props.handleChange('pwd', v)} type='password' placeholder='password'>密码</InputItem>
            <InputItem onChange={v => this.props.handleChange('repeatpwd', v)} type='password' placeholder='confirm password'>确认密码</InputItem>
            <RadioItem onChange={() => this.props.handleChange('type', 'genius')} checked={this.props.state.type === 'genius'}>牛人</RadioItem>
            <RadioItem onChange={() => this.props.handleChange('type', 'boss')} checked={this.props.state.type === 'boss'}>Boss</RadioItem>
          </List>
          <WhiteSpace />
          <Button onClick={this.register.bind(this)} type='primary'>注册</Button>
          <WhiteSpace />
          <Button onClick={this.login.bind(this)} type='primary'>去登录</Button>
        </WingBlank>
      </div>
    )
  }
}

export default Register